import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { getAveScore, filterMonth } from '../lib/publicMethod'
import VCData from '../interface/VCData'

interface IProps {
  data: VCData[]
  teaToList: {
    [key: string]: VCData[]
  }
  min: number
}
export default function TeacherLine(props: IProps) {
  const el = useRef<HTMLDivElement | null>(null)
  const ec = useRef<echarts.ECharts | null>(null)
  useEffect(() => {
    ec.current = echarts.init(el.current as HTMLDivElement)
  }, [])
  useEffect(() => {
    const teaToListArr: [string, VCData[]][] = Object.entries(props.teaToList)
    const teaToListEc = []
    for (let i = 0; i < teaToListArr.length; i++) {
      teaToListEc.push({
        name: teaToListArr[i][0],
        type: 'line',
        data: [
          getAveScore(filterMonth(teaToListArr[i][1] as [], '二月')) || '-',
          getAveScore(filterMonth(teaToListArr[i][1] as [], '三月')) || '-',
          getAveScore(filterMonth(teaToListArr[i][1] as [], '四月')) || '-',
          getAveScore(filterMonth(teaToListArr[i][1] as [], '五月')) || '-',
          getAveScore(filterMonth(teaToListArr[i][1] as [], '六月')) || '-',
          getAveScore(filterMonth(teaToListArr[i][1] as [], '七月')) || '-',
        ],
        label: {
          show: true,
          formatter: '{a}'
        },
        connectNulls: true,
        emphasis: {  // 添加高亮样式
          lineStyle: {
            width: 10
          }
        }
      })
    }
    ec.current?.clear();
    (ec.current as echarts.ECharts).setOption({
      legend: {
        data: Object.keys(props.teaToList)
      },
      xAxis: {
        data: ["二月", "三月", "四月", "五月", "六月", "七月"]
      },
      yAxis: {
        min: props.min
      },
      tooltip: {
        trigger: 'item'
      },
      series: teaToListEc
    })
  }, [props.data, props.teaToList, props.min])
  return (
    <div className="showFour" ref={el}></div>
  )
}
